<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function makeLine(callback){
				let c1=document.createElement('canvas')
				c1.width=c1.height=500
				console.log(c1);
				var pen=c1.getContext('2d')
				callback(pen)
				pen.stroke()
				document.body.appendChild(c1)
			}
			// makeLine(pen=>{
			// 	// 画笔保留当前设置状态
			// 	pen.save()
			// 	// 按照坐标方向移动坐标位置，先旋转后移动会导致意外
			// 	pen.translate(200,50)
			// 	// 画笔保留当前设置状态
			// 	pen.save()
			// 	// 旋转坐标
			// 	pen.rotate(Math.PI/4)
			// 	// 放大rect的坐标参数
			// 	pen.scale(2,2)
			// 	pen.rect(0,0,100,200)
				
			// 	// 清空之前的设置，恢复到上次保存的状态
			// 	pen.restore()
			// 	pen.rect(0,0,100,200)
			// 	// 恢复到上上次保存的状态，类似于栈
			// 	pen.restore()
			// 	pen.rect(0,0,100,200)
			// 	pen.rect(250 ,300 ,200 ,100)
			// })
			makeLine(pen=>{
				// 位置  横向半径  纵向半径  旋转角度  绘制角度
				pen.ellipse(100,100,50,100,Math.PI/2,Math.PI,Math.PI*2);
				pen.fillStyle="#058";
				pen.strokeStyle="#000";
				pen.fill();
				pen.stroke();
			})
		</script>
	</body>
</html>
